<template>
	<view class="home">
		<!-- 轮播图 -->
		<swiper indicator-dots=false circular="true" autoplay="true" interval="2000">
			<swiper-item>
				<image src="../../static/1.jpg"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/2.jpg"></image>
			</swiper-item>
		</swiper>

		<!-- 导航栏 -->
		<view class="show">
			<view class="show_item" v-for="(item,index) in navs" :key="index" @click="navItemClick(item.path)">
				<image :src=item.imagePath></image>
				<text>{{item.title}}</text>
			</view>
		</view>

		<!-- 推荐商品 -->
		<view class="hot_goods">
			<view class="tit">
				推荐商品
			</view>

			<view class="goods_list">
				<view class="goods_item">
					<image src="../../static/iphone12.jpg"></image>
					<view class="price">
						<text>￥2199</text>
						<text class="second_price">￥2499</text>
					</view>
					<view class="name">
						iphone12 全网通 32G
					</view>
				</view>

				<view class="goods_item">
					<image src="../../static/iphone12_02.png"></image>
					<view class="price">
						<text>￥2199</text>
						<text class="second_price">￥2499</text>
					</view>
					<view class="name">
						iphone12 全网通 64G
					</view>
				</view>

				<view class="goods_item">
					<image src="../../static/iphone12_03.jpg"></image>
					<view class="price">
						<text>￥2199</text>
						<text class="second_price">￥2499</text>
					</view>
					<view class="name">
						iphone12 全网通 128G
					</view>
				</view>

				<view class="goods_item">
					<image src="../../static/iphone12_04.jpg"></image>
					<view class="price">
						<text>￥2199</text>
						<text class="second_price">￥2499</text>
					</view>
					<view class="name">
						iphone12 全网通 256G
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				swipers: [],
				navs: [{
						imagePath: '../../static/3.jpg',
						title: '我的超市',
						path: '/pages/goods-list/goods-list'
					},
					{
						imagePath: '../../static/4.jpg',
						title: '联系我们',
						path: '/pages/concatus/concatus'
					},
					{
						imagePath: '../../static/5.jpg',
						title: '社区图片',
						path: '/pages/picture/picture'
					},
					{
						imagePath: '../../static/6.jpg',
						title: '学习视频',
						path: '/pages/news/news'
					}
				]
			}
		},
		onLoad() {
			this.getSwipers()
		},
		methods: {
			getSwipers() {
				console.log("轮播图")
				this.swipers = [
					'1',
					'2',
				]
			},
			navItemClick(itemPath) {
				console.log(itemPath)
				uni.navigateTo({
					url: itemPath
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.home {
		swiper {
			width: 750rpx;
			height: 380rpx;

			image {
				width: 100%;
				height: 100%
			}
		}
	}

	.show {
		display: flex;

		.show_item {
			width: 25%;
			text-align: center;

			text {
				font-size: 30rpx;
			}

			image {
				width: 120rpx;
				height: 120rpx;
				background-color: "$shop-color";
				border-radius: 60rpx;
				margin: 20rpx;
			}
		}
	}

	.hot_goods {
		background: #eee;
		overflow: hidden;
		margin-top: 30rpx;

		.tit {
			height: 70rpx;
			line-height: 70rpx;
			color: $shop-color;
			text-align: center;
			letter-spacing: 20rpx;
			background-color: #fff;
			margin-top: 10rpx;
			margin-bottom: 10rpx;
			font-size: 40rpx;

		}
	}

	.goods_list {
		padding: 0 15rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.goods_item {
			background: #FFFFFF;
			width: 355rpx;
			margin: 10rpx 0;
			padding: 15rpx;
			box-sizing: border-box;

			image {
				width: 100%;
				height: 250rpx;
				// display: block;
				// margin: auto;
			}

			.price {
				color: $shop-color;
				font-size: 30rpx;
				margin: 20rpx 0 10rpx 0;

				.second_price {
					color: #ccc;
					font-size: 20rpx;
					margin-left: 7rpx;
					text-decoration: line-through;
				}
			}

			.name {
				font-size: 28rpx;
				line-height: 50rpx;
				padding-bottom: 15rpx;
				padding-top: 10rpx;
			}
		}
	}
</style>
